<template>
  <div class="content-body" :style="borderStyle">
    <!--    <div class="footer-li-min">
      <el-image :src="(baseUrl.substring(0,baseUrl.length-1))+$store.getters.config.schoolLogoBottom" />
    </div>-->
    <!--    <div class="footer-li-min">
      <div class="footer-li-title">访问数据：</div>
      <div class="footer-li-content">
        <div class="footer-li-line">日访问量：{{ rfwl }} <i class="el-input__icon iconfont icon-iconfont icon-a-computermore-line" /></div>
        <div class="footer-li-line">总访问量：{{ zfwl }} <i class="el-icon-s-data" /></div>
      </div>
    </div>-->
    <div class="footer-li">
      <div class="footer-li-content">
        <p class="footer-content-p">
          {{ $store.getters.config.schoolName }},{{
            $store.getters.config.caseNumber
          }}<!--,
          {{ $store.getters.config.schoolAddress }},{{ $store.getters.config.schoolPhone }}<br>
          推荐使用（IE10及以上，Firefox,Chrome,360极速）主流浏览器，分辨率：1920*1080以上分辨率访问本网站-->
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { querySystemVital } from '@/api/config/config';
import { isEmpty } from 'lodash';
export default {
  name: 'PortalNewFooter',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      rfwl: 0,
      zfwl: 0,
      layoutStyle: {},
      borderStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    themes(val, oldVal) {
      this.borderStyle.background = val.columnTitleGroundColor;
      this.borderStyle.color = val.columnTitleFontColor;
      this.borderStyle = Object.assign({}, this.borderStyle);
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      querySystemVital().then(res => {
        const { data } = res;
        if (!isEmpty(data)) {
          this.rfwl = data.rfwl;
          this.zfwl = data.zfwl;
        }
      });
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  font-size: 14px;
  padding: 0px 8%;
  box-sizing: border-box;
}
.footer-li-min {
  flex: 0 1 auto;
  width: 260px;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px;
  box-sizing: border-box;
  line-height: 60px;
}
.footer-li-min ::v-deep .el-image .el-image__inner {
  height: 40px;
}
.footer-li {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
}
.footer-li-title {
  flex: 0 1 auto;
  width: 100px;
  line-height: 40px;
}
.footer-li-content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
}
.footer-content-p {
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.footer-li-line {
  flex: 0 1 auto;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
</style>
